<!-- 任务中心 -->
<template>
  <div id="missionCenter">
    <h2>请完成以下任务</h2>
    <div class="item flex-a-c" v-for="item in list" :key="item.reason.type">
      <div class="icon-box" :style="{'background': item.reason.color + 30}">
        <i class="iconfont" :class="item.reason.icon" :style="{'color': item.reason.color}"></i>
      </div>
      <div class="mission-text" style="">{{item.reason.name}}</div>
      <button @click="toMission(item)">去完成</button>
    </div>
  </div>
</template>

<script>
import {unfinishedTaskFn,redirectToPage} from '../../fun/unfinished-task.js';

export default {
  data () {
    return {
      list: []
    };
  },
  activated() {
    this.getData();
  },
  components: {},
  computed: {},
  methods: {
    async getData() {
      let {
        result,
        msg,
        validate_page
      } = await $http.get("member.member-info.user-info-update-page");
      if (result == 0) return this.$toast(msg);
      this.list = await unfinishedTaskFn(validate_page);
    },
    toMission(result){
      redirectToPage(result.reason.type);
    }
  }
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
#missionCenter {
  padding: 0.875rem;
  h2 {
    font-size: 1rem;
    color: #00001C;
    font-weight: bold;
    text-align: left;
  }
  .item {
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.75rem;
    margin-top: 0.875rem;
    .icon-box{
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
      background: #EAF7FF;
      .iconfont {
        line-height: 2.25rem;
        font-size: 22px;
      }
    }
    .mission-text{
      flex: 1;
      padding: 0 0.625rem;
      text-align: left;
      font-weight: bold;
      font-size: 0.875rem;
    }

    button{
      padding:0 0.75rem;
      line-height: 1.75rem;
      border-radius: 1rem;
      border: none;
      background: var(--themeBaseColor);
      color: #fff;
    }
  }
}
</style>